<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>style feature layers(设置要素图层样式)</title>
    <style>
        html,body,#viewDiv {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.17/esri/css/main.css">
    <script src="https://js.arcgis.com/4.17/"></script>
    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/FeatureLayer"
        ],function(Map,MapView,FeatureLayer){
            var map = new Map({
                basemap:"topo-vector"
            });

            var view = new MapView({
                container:"viewDiv",
                map:map,
                center:[-118.80543,34.02700],
                zoom:13
            });

            // Define a simple renderer and an image symbol
            // 定义 一个 简单的 渲染器 和一个 图像 符号
            var trailheadsRenderer = {  //添加一个徒步旅行者图
                "type": "simple",
                "symbol": {
                    "type": "picture-marker",
                    "url": "http://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png",
                    "width": "18px",
                    "height": "18px"
                }
            }
            //在地图上显示对应的数据
            var trailheadsLabels = {
                symbol: {
                    type: "text",
                    color: "#FFFFFF",
                    haloColor: "#5E8D74",  //字体外部环绕的颜色
                    haloSize: "2px",
                    font: {
                    size: "12px",
                    family: "Noto Sans",
                    style: "italic",
                    weight: "normal"
                    }
                },
                labelPlacement: "above-center",
                labelExpressionInfo: {
                    expression: "$feature.TRL_NAME"
                }
            };
            var trailheads = new FeatureLayer({
                url:
                    "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0",
                renderer: trailheadsRenderer,
                labelingInfo: [trailheadsLabels]
            });

            map.add(trailheads);

            var trailsRenderer = {
                type: "simple",
                symbol: {
                    color: "#BA55D3",
                    type: "simple-line",
                    style: "solid"
                },
                visualVariables: [
                    {
                    type: "size",
                    field: "ELEV_GAIN",
                    minDataValue: 0,
                    maxDataValue: 2300,
                    minSize: "3px",
                    maxSize: "7px"
                    }
                ]
            };
            var trails = new FeatureLayer({
                url:
                    "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
                renderer: trailsRenderer,
                opacity: 0.35
            });
// add(name,index) 的第二个参数index规定了图层显示的位置，如（1，0）1的图层显示在0的图层的上面
            map.add(trails, 0);

            var bikeTrailsRenderer = {
                type: "simple",
                symbol: {
                    type: "simple-line",
                    style: "short-dot",
                    color: "#FF91FF",
                    width: "1px"
                }
            };
            var bikeTrails = new FeatureLayer({
                url:
                    "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
                renderer: bikeTrailsRenderer,
                definitionExpression: "USE_BIKE = 'YES'"
            });

            map.add(bikeTrails, 1);

            function createFillSymbol(value, color) {
                return {
                    value: value,
                    symbol: {
                    color: color,
                    type: "simple-fill",
                    style: "solid",
                    outline: {
                        style: "none"
                    }
                    },
                    label: value
                };
                }

                var openSpacesRenderer = {
                type: "unique-value",
                field: "TYPE",
                uniqueValueInfos: [
                    createFillSymbol("Natural Areas", "#9E559C"),
                    createFillSymbol("Regional Open Space", "#A7C636"),
                    createFillSymbol("Local Park", "#149ECE"),
                    createFillSymbol("Regional Recreation Park", "#ED5151")
                ]
            };
            var openspaces = new FeatureLayer({
                url:
                    "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0",
                renderer: openSpacesRenderer,
                opacity: 0.2
            });

            map.add(openspaces, 0);
        })
    </script>
</head>
<body>
    <div id="viewDiv"></div>
</body>
</html>